<template>
  <div class="box-main">
    <div class="box-lift">
      <el-table @row-click="setReleaseId" v-loading="loading" :data="works">
        <el-table-column fixed label="编号" prop="workItemId" sortable width="180"/>
        <el-table-column fixed label="标题" prop="title" sortable width="180"/>
        <el-table-column label="工作项类型" align="center" prop="type">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.work_type" :value="scope.row.type"/>
          </template>
        </el-table-column>
        <el-table-column label="负责人" prop="assignee" sortable width="180">
          <template v-slot:default="scope">
            <user-and-avatar :userId="scope.row.assignee"/>
          </template>
        </el-table-column>
        <el-table-column label="优先级" align="center" prop="priority">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.priority" :value="scope.row.priority"/>
          </template>
        </el-table-column>
        <el-table-column label="计划完成日期" align="center" prop="dueDate" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.dueDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="工作项状态" align="center" prop="status">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.work_status" :value="scope.row.status"/>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>=0"
        :total="total"
        :page.sync="query.pageNum"
        :limit.sync="query.pageSize"
        @pagination="getWorks"
      />
    </div>
    <div class="box-right">
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        @select="selectAll">
        <el-menu-item index="1">
          <i class="el-icon-menu"></i>
          <span slot="title">全部需求</span>
        </el-menu-item>
        <el-menu-item index="5">
          <i class="el-icon-menu"></i>
          <span slot="title">全部史诗</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-menu"></i>
          <span slot="title">全部特性</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-document"></i>
          <span slot="title">全部用户故事</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-document"></i>
          <span slot="title">进行中的需求</span>
        </el-menu-item>
      </el-menu>
    </div>
    <el-dialog :visible.sync="showWorkInit" title="工作项详情" width="1650px">
      <work-item :work-id="workId"></work-item>
    </el-dialog>
  </div>
</template>

<script>
import {listWorkNeed} from "@/api/projectUser/userWork";
import UserAndAvatar from "@/components/UserAndAvatar/index.vue";
import UpdateWork from "@/components/Project/upWork.vue";
import WorkItem from "@/components/Project/workItem.vue";

export default {
  name: 'Requirement',
  components: {WorkItem, UpdateWork, UserAndAvatar},
  dicts: ['work_status', 'work_type', 'priority'],
  data() {
    return {
      workId: null,
      showWorkInit: false,
      works: [],
      query: {},
      total: 0,
      loading: true,
    }
  },
  props: {
    projectId: {
      type: [String, Number],
    }
  },
  created() {
    this.getWorks()
  },
  methods: {
    setReleaseId(row) {
      this.showWorkInit=true;
      this.workId = row.workItemId;
    },
    getWorks() {
      listWorkNeed(this.projectId, this.query).then(response => {
        this.works = response.rows;
        this.loading = false;
      })
    },
    selectAll(val) {
      this.loading = true;
      this.query = {}
      switch (val) {
        case '1':
          break;
        case '2':
          this.query.type = "feature"
          break;
        case '3':
          this.query.type = "user_story"
          break;
        case '4':
          this.query.status = "in_progress"
          break;
        case '5':
          this.query.type = "epic"
          break;
      }
      this.getWorks()
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
